﻿
@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



<style>
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-bottom: 10px !important;
    }
</style>
<div id="divForm" style="margin:2px;padding:2px;" v-cloak>
    <el-form :model="form" label-width="150px" style="top:80px;">
        <div style="top:20px;position:fixed;height:80px;left:45px;">
            <el-row :gutter="24">

                <el-button type="primary" v-on:click="SaveRoutes()" size="mini">保存</el-button>
                <el-button v-on:click="Back()" size="mini">返回</el-button>

            </el-row>
        </div>
        <el-card class="box-card" style="margin-top: 50px;" size="mini">
            @*<el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="项目名称" required size="mini">
                            <el-input v-model="form.projectName" placeholder="项目名称" size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                 
                </el-row>*@
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="状态" size="mini">
                        <el-radio-group v-model="form.enabled" size="mini">
                            <el-radio :label='true'>启用</el-radio>
                            <el-radio :label='false'>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="下游服务协议" size="mini">
                        <el-radio-group v-model="form.downstreamScheme" size="mini">
                            <el-radio label='http'>http</el-radio>
                            <el-radio label='https'>https</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="下游服务模板" size="mini">
                        <el-input v-model="form.downstreamPathTemplate" placeholder="/api/test" size="mini"></el-input>
                    </el-form-item>
                </el-col> 
                <el-col :span="12"> 
                    <el-form-item label="下游http版本" size="mini">
                        <el-input v-model="form.downstreamHttpVersion" placeholder="1.0  1.1 or 2.0" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="上游服务模板" size="mini">
                        <el-input v-model="form.upstreamPathTemplate" placeholder="/api/test" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上游方法类型" size="mini">
                        <el-checkbox-group v-model="form.upstreamHttpMethodList">
                            <el-checkbox label="get" style="margin-right:10px;"></el-checkbox>
                            <el-checkbox label="post" style="margin-right: 10px;"> </el-checkbox>
                            <el-checkbox label="put" style="margin-right: 10px;"></el-checkbox>
                            <el-checkbox label="delete" style="margin-right: 10px;"></el-checkbox>
                            <el-checkbox label="option" style="margin-right: 10px;"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="上游Host" size="mini">
                        <el-input v-model="form.upstreamHost" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="请求id的Key" size="mini">
                        <el-input v-model="form.requestIdKey" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="key" size="mini">
                        <el-input v-model="form.key" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="委托处理" size="mini">
                        <el-input v-model="form.delegatingHandlers" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">

                <el-col :span="12">
                    <el-form-item label="请求结果缓存时间" size="mini">
                        <el-input v-model="form.cache_TtlSeconds" autocomplete="off" size="mini" placeholder="ttl秒被设置为15 缓存15秒后过期。">
                            <template slot="append">
                                秒
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="缓存region" size="mini">
                        <el-input v-model="form.cache_Region" autocomplete="off" size="mini" placeholder="缓存region，可以使用administrator API清除"> </el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="路由是否匹配大小写" size="mini">
                        <el-radio-group v-model="form.routeIsCaseSensitive" size="mini">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="评估危险服务器认证" size="mini">
                        <el-radio-group v-model="form.dangerousAcceptAnyServerCertificateValidator" size="mini">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

            </el-row>


            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="服务名称" size="mini">
                        <el-input v-model="form.serviceName" placeholder="服务名称，服务发现时必填" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="服务命名空间" size="mini">
                        <el-input v-model="form.serviceNamespace" placeholder="服务命名空间" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="路由节点优先级" size="mini">
                        <el-input v-model="form.priority" placeholder="" type="number" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="超时时间" size="mini">
                        <el-input v-model="form.timeout" placeholder="超时时间" type="number" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-tabs>
                    <el-tab-pane label="Host端口">
                        <el-button type="success" v-on:click="AddHostPort()" size="mini">新增</el-button>
                        <el-table :data="hostPortTableData" stripe border size="mini">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="Host" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.host" placeholder="Host"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="Port" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.port" placeholder="Port" type="number"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="left">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @@click="deleteHostPort(scope)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="断路器配置">
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="允许的例外数量" size="mini">
                                    <el-input v-model="form.qos_ExceptionsAllowedBeforeBreaking" placeholder="打开断路器之前允许的例外数量" autocomplete="off" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="恢复时间间隔" size="mini">
                                    <el-input v-model="form.qos_DurationOfBreak" placeholder="断路器复位之前，打开的时间" autocomplete="off" size="mini">
                                        <template slot="append">
                                            毫秒
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="请求超时时间" size="mini">
                                    <el-input v-model="form.qos_TimeoutValue" placeholder="请求超时时间" autocomplete="off" size="mini">
                                        <template slot="append">
                                            毫秒
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="流量限制">
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="是否启用流量限制" size="mini">
                                    <el-radio-group v-model="form.rateLimit_EnableRateLimiting" size="mini"> 
                                        <el-radio :label="true">启用</el-radio>
                                        <el-radio :label="false">禁用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="利率限制期" size="mini">
                                    <el-input v-model="form.rateLimit_Period" placeholder="限制期，如1s、1m、1h" autocomplete="off" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="限制期时间戳" size="mini">
                                    <el-input v-model="form.rateLimit_PeriodTimespan" laceholder="限制期时间戳" autocomplete="off" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="最大请求数" size="mini">
                                    <el-input v-model="form.rateLimit_Limit" placeholder="客户端在定义的时间段内可以发出的最大请求数" autocomplete="off" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="24">
                                <el-form-item label="白名单" required size="mini">
                                    <el-tag :key="rateWhiteList"
                                            v-for="rateWhiteList in rateWhiteLists"
                                            closable
                                            :disable-transitions="false"
                                            v-on:close="rateWhiteListClose(rateWhiteList)" style="width:200px;" size="mini">
                                        {{rateWhiteList}}
                                    </el-tag>
                                    <el-input placeholder="如：127.0.0.1" class="input-new-tag"
                                              v-if="rateWhiteListVisible"
                                              v-model="rateWhiteListValue"
                                              ref="rateWhiteListInput"
                                              size="mini"
                                              v-on:keyup.enter.native="rateWhiteListConfirm"
                                              v-on:blur="rateWhiteListConfirm" style="width: 200px;">
                                    </el-input>
                                    <el-button v-else class="button-new-tag" size="mini" v-on:click="showrateWhiteList">新增白名单</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="认证配置">
                        <el-row :gutter="24">
                            <el-col :span="24">
                                <el-form-item label="JWTBreark中的Key" size="mini">
                                    <el-input v-model="form.authentication_AuthenticationProviderKey" placeholder="这个key对应的是代码中.AddJWTBreark中的Key" autocomplete="off" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="24">
                            <el-col :span="24">
                                <el-form-item label="使用范围" required size="mini">
                                    <el-tag :key="scope"
                                            v-for="scope in allowedScopes"
                                            closable
                                            :disable-transitions="false"
                                            v-on:close="scopeClose(scope)" style="width:200px;" size="mini">
                                        {{scope}}
                                    </el-tag>
                                    <el-input placeholder="" class="input-new-tag"
                                              v-if="scopeVisible"
                                              v-model="scopeValue"
                                              ref="scopeInput"
                                              size="mini"
                                              v-on:keyup.enter.native="scopeConfirm"
                                              v-on:blur="scopeConfirm" style="width: 200px;">
                                    </el-input>
                                    <el-button v-else class="button-new-tag" size="mini" v-on:click="showScope">新增范围</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="http处理">
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="允许自定重定向" size="mini">
                                    <el-radio-group v-model="form.httpHandler_AllowAutoRedirect" size="mini">
                                        <el-radio :label="true">允许</el-radio>
                                        <el-radio :label="false">不允许</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="使用cookie容器" size="mini">
                                    <el-radio-group v-model="form.httpHandler_UseCookieContainer" size="mini">
                                        <el-radio :label="true">使用</el-radio>
                                        <el-radio :label="false">不使用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="使用追踪" size="mini">
                                    <el-radio-group v-model="form.httpHandler_UseTracing" size="mini">
                                        <el-radio :label="true">使用</el-radio>
                                        <el-radio :label="false">不使用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="使用代理" size="mini">
                                    <el-radio-group v-model="form.httpHandler_UseProxy" size="mini">
                                        <el-radio :label="true">使用</el-radio>
                                        <el-radio :label="false">不使用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="服务最大连接数" size="mini">
                                    <el-input v-model="form.httpHandler_MaxConnectionsPerServer" type="number" autocomplete="off" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="负载均衡">
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="负载均衡类型" size="mini">
                                    <el-radio-group v-model="form.loadBalancer_Type" size="mini"> 
                                        <el-radio label="RoundRobin" value="RoundRobin">轮询</el-radio>
                                        <el-radio label="LeastConnection"  value="LeastConnection">最少连接数</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="负载均衡Key" size="mini">
                                    <el-input v-model="form.loadBalancer_Key" autocomplete="off" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="负载均衡Expiry" size="mini">
                                    <el-input v-model="form.loadBalancer_Expiry" type="number" autocomplete="off" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="Header内容">
                        <el-button type="success" v-on:click="AddHeader()" size="mini">新增</el-button>
                        <el-table :data="headerTableData" stripe border size="mini">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="Key" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.key" placeholder="Key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="Value" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.value" placeholder="Value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="left">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @@click="deleteHeader(scope)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="上游Header转移">
                        <el-button type="success" v-on:click="AddHeaderTransform()" size="mini">新增</el-button>
                        <el-table :data="headerTransformTableData" stripe border size="mini">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="Key" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.key" placeholder="Key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="Value" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.value" placeholder="Value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="left">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @@click="deleteHeaderTransform(scope)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="下游Header转移">
                        <el-button type="success" v-on:click="AddHeaderDownTransform()" size="mini">新增</el-button>
                        <el-table :data="headerDownTransformTableData" stripe border size="mini">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="Key" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.key" placeholder="Key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="Value" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.value" placeholder="Value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="left">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @@click="deleteHeaderDownTransform(scope)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="Claims声明">
                        <el-button type="success" v-on:click="AddClaims()" size="mini">新增</el-button>
                        <el-table :data="claimsTableData" stripe border size="mini">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="Key" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.key" placeholder="Key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="Value" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.value" placeholder="Value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="left">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @@click="deleteClaims(scope)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="路由Claims">
                        <el-button type="success" v-on:click="AddRouteClaims()" size="mini">新增</el-button>
                        <el-table :data="claimsRouteTableData" stripe border size="mini">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="Key" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.key" placeholder="Key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="Value" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.value" placeholder="Value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="left">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @@click="deleteRouteClaims(scope)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="Queries参数">
                        <el-button type="success" v-on:click="AddQueries()" size="mini">新增</el-button>
                        <el-table :data="queriesTableData" stripe border size="mini">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="Key" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.key" placeholder="Key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="Value" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.value" placeholder="Value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="left">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @@click="deleteQueries(scope)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="下游模板变更">
                        <el-button type="success" v-on:click="AddDownTempletes()" size="mini">新增</el-button>
                        <el-table :data="downTempletesTableData" stripe border size="mini">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="Key" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.key" placeholder="Key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="Value" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.value" placeholder="Value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="left">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @@click="deleteDownTempletes(scope)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-row>

    </el-form>
</div>
<script>

    var vueNewsCategory = new Vue({
        el: '#divForm',
        data() {
            return {

                rateWhiteLists: [],
                rateWhiteListVisible: false,
                rateWhiteListValue: '',

                allowedScopes: [],
                scopeVisible: false,
                scopeValue: '',


                headerTableData:[],
                headerTransformTableData:[],
                headerDownTransformTableData: [],
                claimsTableData: [],

                claimsRouteTableData: [],
                queriesTableData:[],
                downTempletesTableData: [],
                hostPortTableData:[],

                form: {
                    id: parseInt(getQueryString("id") || 0),
                    projectId:0,
                    dangerousAcceptAnyServerCertificateValidator:false,
                    upstreamHttpMethodList: [],
              
                    loadBalancer_Type:''
                }
            }
        },
        created() {
            var _this = this;

            _this.GetRoutes();
        },
        methods: {
            AddHeader: function () {
                this.headerTableData.push({ key: '', value: '' });
            },
            deleteHeader: function (scope) {
                if (this.headerTableData == null) return;
                var index = scope.$index;
                this.headerTableData.splice(index, 1);
            },


            AddHeaderTransform: function () {
                this.headerTransformTableData.push({ key: '', value: '' });
            },
            deleteHeaderTransform: function (scope) {
                if (this.headerTransformTableData == null) return;
                var index = scope.$index;
                this.headerTransformTableData.splice(index, 1);
            },

            AddHeaderDownTransform: function () {
                this.headerDownTransformTableData.push({ key: '', value: '' });
            },
            deleteHeaderDownTransform: function (scope) {
                if (this.headerDownTransformTableData == null) return;
                var index = scope.$index;
                this.headerDownTransformTableData.splice(index, 1);
            },

            AddClaims: function () {
                this.claimsTableData.push({ key: '', value: '' });
            },
            deleteClaims: function (scope) {
                if (this.claimsTableData == null) return;
                var index = scope.$index;
                this.claimsTableData.splice(index, 1);
            },

            AddRouteClaims: function () {
                this.claimsRouteTableData.push({ key: '', value: '' });
            },
            deleteRouteClaims: function (scope) {
                if (this.claimsRouteTableData == null) return;
                var index = scope.$index;
                this.claimsRouteTableData.splice(index, 1);
            },

            AddQueries: function () {
                this.queriesTableData.push({ key: '', value: '' });
            },
            deleteQueries: function (scope) {
                if (this.queriesTableData == null) return;
                var index = scope.$index;
                this.queriesTableData.splice(index, 1);
            },


            AddDownTempletes: function () {
                this.downTempletesTableData.push({ key: '', value: '' });
            },
            deleteDownTempletes: function (scope) {
                if (this.downTempletesTableData == null) return;
                var index = scope.$index;
                this.downTempletesTableData.splice(index, 1);
            },

            AddHostPort: function () {
                this.hostPortTableData.push({ host: '', port: '' });
            },
            deleteHostPort: function (scope) {
                if (this.hostPortTableData == null) return;
                var index = scope.$index;
                this.hostPortTableData.splice(index, 1);
            },

            AddRouter: function () {
                this.dialogRouterVisible = true;
            },



            rateWhiteListClose: function (claim) {
                this.rateWhiteLists.splice(this.rateWhiteLists.indexOf(claim), 1);
            },
            rateWhiteListConfirm: function () {
                let rateWhiteListValue = this.rateWhiteListValue;
                if (rateWhiteListValue) {
                    this.rateWhiteLists.push(rateWhiteListValue);
                }
                this.rateWhiteListVisible = false;
                this.rateWhiteListValue = '';
            },
            showrateWhiteList: function (row) {
                this.rateWhiteListVisible = true;
            },

            scopeClose: function (claim) {
                this.allowedScopes.splice(this.allowedScopes.indexOf(claim), 1);
            },
            scopeConfirm: function () {
                let scopeValue = this.scopeValue;
                if (scopeValue) {
                    this.allowedScopes.push(scopeValue);
                }
                this.scopeVisible = false;
                this.scopeValue = '';
            },
            showScope: function (row) {
                this.scopeVisible = true;
            },
            GetRoutes() {
                var _this = this;
                _this.$get("@Url.Action("GetRoutes", "Routes")?id=" + _this.form.id ).then((res) => {
                    _this.form = res;

                    _this.rateWhiteLists = res.rateLimit_WhiteList_list||[];
                    _this.form.upstreamHttpMethodList = res.upstreamHttpMethodList||[];
                    _this.allowedScopes = res.authentication_AllowedScopes_List || [];
                    _this.headerTableData = res.headers || [];
                    _this.headerTransformTableData = res.headerUpTransforms || [];
                    _this.headerDownTransformTableData = res.headerDownTransform || [];
                    _this.claimsTableData = res.claims || [];
                    _this.claimsRouteTableData = res.routeClaims || [];
                    _this.queriesTableData = res.queries || [];
                    _this.downTempletesTableData = res.downTempletes || [];
                    _this.hostPortTableData = res.hostPort || [];
                    _this.security_IPBlockedList_List = res.security_IPBlockedList_List || [];
                    _this.security_IPAllowedList_List = res.security_IPAllowedList_List || [];
                });
            },
            SaveRoutes() {
                var _this = this;
                _this.form.RateLimit_WhiteList_list = _this.rateWhiteLists;
                _this.form.UpstreamHttpMethodList = _this.form.upstreamHttpMethodList;
                _this.form.Authentication_AllowedScopes_List = _this.allowedScopes;
                _this.form.Headers = _this.headerTableData;
                _this.form.HeaderUpTransforms = _this.headerTransformTableData;
                _this.form.HeaderDownTransform = _this.headerDownTransformTableData;
                _this.form.Claims = _this.claimsTableData;
                _this.form.RouteClaims = _this.claimsRouteTableData;
                _this.form.Queries = _this.queriesTableData;
                _this.form.DownTempletes = _this.downTempletesTableData;
                _this.form.HostPort = _this.hostPortTableData; 
                _this.$post("@Url.Action("SaveRoute", "Routes")", _this.form).then((res) => {
                    _this.$success(res.message, function () {
                        _this.$back(true);
                    });
                }); 
            },

            Back() {
                this.$back();
            }
        }
    });
</script>
